<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="roles">权限管理</a></el-breadcrumb-item>
      <el-breadcrumb-item><a href="roles">角色列表</a></el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="content">
          <div class="header">
            <div class="btn">
              <el-button type="primary" @click="addUser" round>添加用户</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="text item">

        <!--   表格数据   -->

        <el-table
          :data="tableData"
          border
          style="width: 100%">
          <el-table-column type="expand"
            fixed
            label=""
          >
            <template slot-scope="scope">
<!--              <Labe/>-->
              <LabelRoles @toRender="render1()" :id="scope.row.id" :permissions="scope.row.children"/>
            </template>
          </el-table-column>
          <el-table-column
            fixed
            prop="id"
            label="id">
          </el-table-column>
          <el-table-column
            fixed
            prop="roleName"
            label="角色">
          </el-table-column>
          <el-table-column
            prop="roleDesc"
            label="描述">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
              <el-button @click="editRole(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="deleteRole(scope.row.id)" type="text" size="small">删除</el-button>
              <el-button @click="assign(scope.row)" type="text" size="small">分配权限</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!--   表格数据   -->

      </div>
    </el-card>
    <RolesEdit ref="RoleEdit" @toRender="render1()"/>
    <AssignRoles @toRender="render1()" ref="AssignRoles"/>
    <AddRole ref="AddRole" @render1="AddRoleEvent" />
<!--    <Com_role></Com_role>-->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import AssignRoles from '@/components/roles/assign_roles.vue'
import { GET_ALL_ROLE } from '@/store/role/CONST'
import LabelRoles from '@/components/roles/Label_roles'
import Label from '@/components/roles/label_roles.vue'
import { deleteRole as deleteRole1 } from '@/api/permission'
import AddRole from '@/components/roles/AddRole.vue'
import RolesEdit from '@/components/roles/roles_edit.vue'

export interface roleChildren {
  authName:string
  children:Array<roleChildren>
  id:number
  path:string
}
export interface roleObj {
  children:Array<roleChildren>
  id:number
  roleDesc:string
  roleName:string
}
export type roleArr = Array<roleObj>
@Component({
  components: {
    RolesEdit,
    AddRole,
    // ComRole,
    LabelRoles,
    Label,
    AssignRoles
  }
})
export default class Roles extends Vue {
  // 编辑
  public isModify = false
  public modifyData = {}
  public tableData = []

  editRole (value:unknown) {
    const { RoleEdit } = this.$refs as any
    RoleEdit.isOpen(value)
  }

  // 添加角色结果
  AddRoleEvent (status:number, msg:string) {
    this.open(msg, status === 201 ? 'success' : 'error')
    if (status !== 201) return;
    (this.$refs as any).AddRole.isOpen = false;
    (this.$refs as any).AddRole.form.name = '';
    (this.$refs as any).AddRole.form.msg = ''
    this.render1()
  }

  // 删除
  async deleteRole (id:number) {
    try {
      await this.$confirm('此操作将会删除该用户, 是否继续?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      const { meta: { status, msg } } = await deleteRole1(id)
      this.open(msg, status === 200 ? 'success' : 'error')
      this.render1()
    } catch (error) {
      this.open('取消删除', 'warning')
    }
  }

  // 分配角色
  assign (data:roleObj) {
    (this.$refs.AssignRoles as any).enter(data.id, data.children)
    this.render1()
  }

  addUser () {
    (this.$refs as any).AddRole.isOpen = true
  }

  mounted () {
    this.render1()
    this.$root.$on('modifyData', (done:boolean) => {
      if (done) {
        this.render1()
      }
      this.isModify = false
    })
  }

  // public
  // public
  // public

  // 刷新页面
  render1 () {
    this.getAllRole()
  }

  // 提示框
  open (
    smg = '登陆成功',
    type: 'success' | 'warning' | 'info' | 'error' = 'success'
  ) {
    this.$message({
      message: smg,
      type: type
    })
  }

  created () {
    this.getAllRole()
  }

  async getAllRole () {
    await this.$store.dispatch('role/' + GET_ALL_ROLE)
    this.$nextTick(() => {
      this.tableData = this.$store.state.role.role
    })
  }
}

</script>

<style scoped>

</style>
